<template>
  <div id="app">
    <div id="map" className="map"></div>
  </div>
</template>

<script>
//导入基本模块
import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
import {Fill, Style, Stroke} from "ol/style";
//导入相关模块
import {Vector as VectorLayer} from 'ol/layer'
import {Select, Draw} from 'ol/interaction'
import {getArea} from "ol/sphere";
import XYZ from "ol/source/XYZ";
import VectorSource from 'ol/source/Vector'
import { Logo, TileSuperMapRest } from '@supermap/iclient-ol';

import TileLayer from "ol/layer/Tile";
import * as control from "ol/control";

export default {
  name: "getArea",
  data() {
    return {
      map: null, // map地图
      layer: null, //地图图层
      lineLayer: null, //线图层
      draw: null,
      lineSource: null,
      coordinate: [],
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {

    // 绘制面积
    onAddInteraction(type) {
      let self = this
      //勾绘矢量图形的类
      this.draw = new Draw({
        //source代表勾绘的要素属于的数据集
        source: self.lineSource,
        //type 表示勾绘的要素包含的 geometry 类型
        type: type
      })

      //绘制结束时触发的事件
      this.draw.on('drawend', function (e) {
        const geometry = e.feature.getGeometry()
        var area = getArea(geometry);
        console.log("area=" + area)
        var output;
        if (area > 10000) {
          output = (Math.round(area / 1000000 * 100) / 100) +
              ' ' + '平方千米';
        } else {
          output = (Math.round(area * 100) / 100) +
              ' ' + '平方米';
        }
        console.log("output=" + output)
        alert(output);
        let pointArr = geometry.getCoordinates()
        self.coordinate.push(pointArr)
        console.log("self.coordinate=" + self.coordinate);
      })
      self.map.addInteraction(this.draw)
    },
    //删除交互
    removeDraw() {
      this.map.removeInteraction(this.draw)
    },

    initMap() {
      this.map = new Map({
        target: "map",
        view: new View({
          center: [115.87,37.82],
          zoom: 11.5
        }),
      });

      var map_cva= new TileLayer({
        source: new XYZ({
          url: "http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=d0cf74b31931aab68af181d23fa23d8d"
        })
      });
      var map_vec =new TileLayer({
        source: new XYZ({
          url: "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=d0cf74b31931aab68af181d23fa23d8d"
        })
      });


      //超图底图
      var url1="http://192.168.32.187:8090/iserver/services/map-WYCSSJ0412/rest/maps/WYXDLTB";

      var layer = new TileLayer({
        source: new TileSuperMapRest({
          url: url1,
          wrapX: true,
        }),
        projection: "EPSG:4326",
      });



      this.map.addLayer(map_cva);
      this.map.addLayer(map_vec);
      this.map.addLayer(layer);

      //线的图层
      this.lineSource = new VectorSource({wrapX: false});
      this.lineLayer = new VectorLayer({
        source: this.lineSource,
      });


      // 获取点击地图的坐标(选中样式)
      let selectedStyle = new Style({
        fill: new Fill({
          color: 'rgba(1, 210, 241, 0.2)'
        }),
        stroke: new Stroke({
          color: 'yellow',
          width: 4
        })
      })
      // 选择线的工具类
      this.selectTool = new Select({
        multi: true,
        hitTolerance: 10, // 误差
        style: selectedStyle // 选中要素的样式
      })
      //添加交互
      this.map.addInteraction(this.selectTool)
      //调用绘图工具并传递类型为线，其他类型有Point,LineString,Polygon,Circle
      this.onAddInteraction('Polygon')

    },
  },
};
</script>

<style scoped>
#map {
  width: 960px;
  height: 800px;
  border: 1px #ff0000 solid;
}
</style>
